<template>
  <data-grid
    ref="dataGridRef"
    id="admin-menu-grid"
    row-key="menuId"
    defaultSort="ascending"
    defaultSortBy="menuCode"
    :request="handleLoadGrid"
    :columns="state.columns"
    :buttons="state.buttons"
  >
    <!-- 自定义模板，会替换控件中的 buttonSlot id：button 仅在当前作用域有效 -->
    <template #button-primary="button">
      <el-button type="primary" :icon="Plus" @click="handleAdd">{{
        t("menu.newMenu")
      }}</el-button>
    </template>

    <!-- 自定义模板，会替换控件中的 tdSlot，模板 status 仅在当前作用域有效 -->
    <template #status="slotProps">
      <el-switch v-model="slotProps.row.status" :active-value="1" />
    </template>

    <!-- 自定义模板，会替换控件中的 tdSlot，模板 operate 仅在当前作用域有效 -->
    <template #operate="slotProps">
      <el-link type="primary" @click="handleDetail(slotProps.row)">{{
        t("common.configButton")
      }}</el-link
      >&nbsp;
      <el-link type="primary" @click="handleEdit(slotProps.row)">{{
        t("common.editButton")
      }}</el-link>
      &nbsp;
      <el-link
        type="primary"
        :title="slotProps.item.title"
        @click="handleDelete(slotProps.row)"
        >{{ t("common.deleteButton") }}
      </el-link>
    </template>
  </data-grid>

  <edit-form ref="editFormRef" @on-submit-success="onSubmitSuccess"></edit-form>
</template>
<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import DataGrid from "@/components/DataGrid.vue";
import EditForm from "./edit.vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import utils from "../../../utils/utils";
import apiMenu from "../api/menu";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
const router = useRouter();
// 变量必须和属性 ref 的值相同
const dataGridRef = ref();
const editFormRef = ref();

const state = reactive({
  // 表格列配置，大部分属性跟el-table-column配置一样
  columns: [
    {
      field: "menuId",
      type: "selection",
      align: "center",
      width: 55,
    },
    {
      title: () => t("menu.index"),
      field: "menuId",
      type: "index",
      align: "center",
      width: 100,
    },
    {
      title: () => t("menu.menuName"),
      field: "menuName",
      sortable: true,
      resizable: true,
    },
    {
      title: () => t("menu.menuCode"),
      field: "menuCode",
      sortable: true,
      resizable: true,
    },
    {
      title: () => t("menu.description"),
      field: "description",
      resizable: true,
    },
    {
      title: () => t("common.operateButton"),
      field: "opId",
      tdSlot: "operate",
      width: 200,
    },
  ],
  buttons: [
    {
      type: "primary",
      buttonSlot: "button-primary",
    },
  ],
  row: null,
});

// 加载数据
const handleLoadGrid = async (params: any) => {
  // params 是从表格组件接收的，包含分页和搜索字段，需要补充 query 查询条件信息
  let data = { rows: [], total: 0 };
  await apiMenu
    .queryMenuListing(params)
    .then((response: any) => {
      data = response.data;
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });

  // 返回数据给表格组件
  return data;
};

// 删除操作事件
const handleDelete = (row: any) => {
  // 从表格每行右侧链接点击触发的情况
  ElMessageBox.confirm(t("menu.confirmDelete", { menuName: row.menuName }), {
    confirmButtonText: t("common.okButton"),
    cancelButtonText: t("common.cancelButton"),
  })
    .then(() => {
      apiMenu
        .deleteMenu(row.menuId)
        .then((response: any) => {
          if (response.data.code == 200) {
            handleSearch();
            utils.infoNotification(
              t("menu.deleted", { menuName: row.menuName })
            );
          }
        })
        .catch((err: any) => {
          utils.errorNotification(t("common.submitException"), err);
        });
    })
    .catch((err: any) => {});
};

// 打开新增页
const handleAdd = () => {
  editFormRef.value.show();
};
// 打开详情页
const handleDetail = (row: any) => {
  // 传对象的方式，刷页面后参数丢失
  // router.push({
  //   name: "admin/menu/item/list.vue",
  //   params: row,
  // });
  // url 传参没问题，下一个页面根据 id 从后台查询详情
  router.push({
    name: "/admin/menu/item/list/:menuId",
    params: { menuId: row.menuId },
  });
};
// 打开编辑页
const handleEdit = (row: any) => {
  editFormRef.value.show(row);
};
// 新增、编辑页确定按钮操作成功回调事件
const onSubmitSuccess = (row: any) => {
  handleSearch();
};
// 刷新表格
const handleSearch = () => {
  dataGridRef.value.loadGridData();
};
</script>
<style></style>
